<template>
  <!-- 回收 售后列表  行组件 -->
  <div class="backOrderItem-box" v-if="orderItem">
    <div class="row_header">
      售后编号： {{orderItem.afterNo}}
      <span>创建时间： {{orderItem.createTime}}</span>
      <span>售后状态： <el-tag :type="commonMaps.backAfterStatesMap[orderItem.status||1].type">{{commonMaps.backAfterStatesMap[orderItem.status||1].label}}</el-tag></span>
      
      <span v-if="orderItem.guaranteeRefundStatus">
        赔付状态： <span style="cursor: pointer;" @click="openBillDialog(orderItem.guaranteeRefundFinancialStatementId,userType=='guarant')">
          <el-tag type="danger" v-if="orderItem.guaranteeRefundStatus==1||!orderItem.guaranteeRefundStatus">未赔付</el-tag>
          <el-tag type="success" v-if="orderItem.guaranteeRefundStatus==2">已赔付</el-tag>
          <el-tag type="warning" v-if="orderItem.guaranteeRefundStatus==3">赔付中</el-tag>
          <el-tag type="info" v-if="orderItem.guaranteeRefundStatus==4">财务拒绝</el-tag>
        </span>
      </span>
    </div>
    <div class="row_content flex">
      <div class="info_box">
        <el-descriptions v-if="orderItem.backClueOrder" title="" :column="3" border :labelStyle="{minWidth:'80px',width:'80px',textAlign:'right'}" :contentStyle="{minWidth:'100px',textAlign:'left'}">
          <el-descriptions-item label="卖家">{{orderItem.backClueOrder&&orderItem.backClueOrder.sellerName}}</el-descriptions-item>
          <el-descriptions-item label="游戏账号">{{orderItem.backClueOrder.accountNumber}}</el-descriptions-item>
          <el-descriptions-item label="包赔商" >{{orderItem.backClueOrder.guaranteeTenantName}}</el-descriptions-item>
         
          <!-- 回收 卖家的包赔信息 -->
          <el-descriptions-item label="卖家姓名" v-if="orderItem.backClueOrder.guaranteeInfo">{{getRowsellerBankInfo(orderItem.backClueOrder.guaranteeInfo).name}}</el-descriptions-item>
          <el-descriptions-item label="卖家手机" v-if="orderItem.backClueOrder.guaranteeInfo">{{getRowsellerBankInfo(orderItem.backClueOrder.guaranteeInfo).phoneNumber}}</el-descriptions-item>
          <el-descriptions-item label="身份证号" v-if="orderItem.backClueOrder.guaranteeInfo" :span="2" >{{getRowsellerBankInfo(orderItem.backClueOrder.guaranteeInfo).idCard}}</el-descriptions-item>

          <el-descriptions-item label="包赔费" >¥{{orderItem.backClueOrder.guaranteeAmount||0}}</el-descriptions-item>

          <el-descriptions-item label="回收价"><span >¥{{orderItem.backClueOrder.backAmount}}</span></el-descriptions-item>
          <el-descriptions-item label="总金额" >
            <span style="color:red">¥{{orderItem.backClueOrder.buyerActualAmount}}</span>
          </el-descriptions-item>
          <!-- 售后信息 -->
          <el-descriptions-item  label="赔付金额" v-if="orderItem.afterAmount">
            <span style="color:red">¥{{orderItem.afterAmount}}</span>
          </el-descriptions-item>
          <el-descriptions-item  label="售后问题">{{orderItem.applicantType}}</el-descriptions-item>
          <el-descriptions-item  label="问题描述">{{orderItem.applicantRemark}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="btns_box">
        <slot></slot>
      </div>
    </div>
    <billDetail ref="billDetail"></billDetail>
  </div>
</template>

<script>
import billDetail from "../../financialManage/billDetailDialog.vue";

export default {
  name: "backOrderAfterItem",
  props: ["orderItem","userType"],
  components: { billDetail },
  data() {
    return {
    };
  },
  computed: {
    getRowBaopeiInfo() {
      return (str) => {
        if (str) {
          const obj = JSON.parse(str);
          let s = `${obj.collectionUserName} ${obj.collectionAccountName}  ${obj.collectionAccount} `;
          return s;
        }
      };
    },
    getRowsellerBankInfo() {
      return (str) => {
        if (str) {
          const obj = JSON.parse(str);
          // let s = `${obj.collectionRemark} `;
          return obj;
        }
      };
    },
  },
  created() {},
  methods: {
    openBillDialog(id, flag) {
      if (flag) {
        if (!id) {
          return this.$message.error("暂未生成账单！");
        }
        this.$refs.billDetail.open(id);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.descriptionstitle {
  text-align: center;
}
.backOrderItem-box {
  margin-bottom: 15px;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  overflow: hidden;
  .row_header {
    padding: 8px;
    padding-left: 20px;
    background-color: #6d5dd365;
    > span {
      margin-left: 20px;
    }
    // text-align: center;
  }
  .info_box {
    width: 100%;
  }
  .btns_box {
    width: 200px;
    flex-shrink: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.backOrderItem-box
  ::v-deep
  .el-descriptions--medium.is-bordered
  .el-descriptions-item__cell {
  padding: 5px !important;
}
</style>
